<template>
	<view class="box">		
		<!-- 选择会员 -->
		<view class="selectMember">
			<view class="member">
				<text style="position: relative;">{{start_date || '日期：'}}
					<picker mode="date" :start="startDate" :end="endDate" v-if="!selected"  @change="bindDateChange" style="position: absolute;left:0;top: 0;width: 100%;height: 100%;"></picker> 
				</text>
			</view>
			<view class="save" @click="showModalBtn(1)" v-if="!selected">保存</view>
			<view class="toSend" @click="selected != 1 ? showModalBtn(2) : ''" >确认存档</view>
		</view>
		<view class="mainContent">
			<!-- 基本信息 -->
			<view class="basicInformation">
				<view class="title">基本信息</view>
				<view class="informationBox">
					<view class="item">
						<text>身份证号：</text>
						<text>{{memberInformation.idCard || '未填写'}}</text>
					</view>
					<view class="item">
						<text>姓名：</text>
						<text>{{memberInformation.realName || '未填写'}}</text>
					</view>
					<!-- <view class="item">
						<text>性别：</text>
						<text>{{memberInformation.sex && memberInformation.sex == 1 ? '男' : memberInformation.sex == 2 ? '女' : '未填写' }}</text>
					</view> -->
					<view class="item">
						<text>出生日期：</text>
						<text>{{memberInformation.birthday || '未填写'}}</text>
					</view>
					<!-- <view class="item">
						<text>年龄：</text>
						<text>{{age(memberInformation.idCard,'') + '岁'}}</text>
					</view> -->
					<view class="item">
						<text>手机号：</text>
						<text>{{memberInformation.phone || '未填写'}}</text>
					</view>
					<view class="item">
						<text>性别：</text>
						<input type="text" placeholder="性别" disabled="true" @click="popUp('sex')" v-model="sex">
						<!-- <text>{{memberInformation.sex && memberInformation.sex == 1 ? '男' : memberInformation.sex == 2 ? '女' : '未填写' }}</text> -->
					</view>
					<view class="item">
						<text>年龄：</text>
						<input type="text" placeholder="年龄" v-model="ageNum">
						<!-- <text>{{age(memberInformation.idCard,'') + '岁'}}</text> -->
					</view>
				</view>
			</view>
			
			<!-- 其他信息 -->
			<view class="otherInformation">
				<view class="title">其他信息</view>
				<view class="otherInformationBox">
					<view class="item">
						<text>民族：</text>
						<input type="text" placeholder="选择民族" disabled="true" @click="popUp('national')" v-model="nation">
					</view>
					<view class="item">
						<text>工作单位：</text>
						<input type="text" placeholder="请输入您的工作单位" v-model="employer">
					</view>
					<view class="item">
						<text>紧急联系人：</text>
						<input type="text" placeholder="紧急联系人名字" v-model="emergencyContactName">
					</view>
					<view class="item">
						<text>联系电话：</text>
						<input type="text" placeholder="紧急联系人电话" v-model="emergencyContactPhone">
					</view>
					<view class="item">
						<text>血型：</text>
						<input type="text" placeholder="选择血型" disabled="true" @click="popUp('bloodType')" v-model="bloodGroup">
					</view>
					<view class="item">
						<text>文化程度：</text>
						<input type="text" placeholder="选择文化程度" disabled="true" @click="popUp('levelEducation')" v-model="educationLevel">
					</view>
					<view class="item">
						<text>职业：</text>
						<input type="text" placeholder="选择职业" disabled="true" @click="popUp('professional')" v-model="occupation">
					</view>
					<view class="item">
						<text>婚姻状况：</text>
						<input type="text" placeholder="选择状况" disabled="true" @click="popUp('maritalType')" v-model="maritalStatus">
					</view>
					<view class="item">
						<text>医疗支付：</text>
						<input type="text" placeholder="选择方式" disabled="true" @click="popUp('medicalPayments')" v-model="medicalExpensesType">
					</view>
				</view>
			</view>
			
			<!-- 健康信息 -->
			<view class="healthIformation">
				<view class="title">健康信息</view>
				<view class="healthInformationBox">
					<u-collapse>
						<u-collapse-item :title="historytitle || '药物过敏史：无'">
							<u-checkbox-group>
								<u-checkbox active-color="#05C6AD" @change="checkboxChange($event,index,historyArr,'history')" v-for="(item, index) in historyArr" :key="index" v-model="item.checked"  :name="item.name" >
									{{item.name}}
								</u-checkbox>
							</u-checkbox-group>
						</u-collapse-item>
						
						<u-collapse-item :title="exposureHistorytitle || '暴露史：无'">
							<u-checkbox-group>
								<u-checkbox active-color="#05C6AD" @change="checkboxChange($event,index,exposureHistory,'exposureHistoryArr')" v-for="(item, index) in exposureHistory" :key="index" v-model="item.checked"  :name="item.name" >
									{{item.name}}
								</u-checkbox>
							</u-checkbox-group>
						</u-collapse-item>
					
					</u-collapse>
				</view>
			</view>	
			
			<view style="background-color: #FFFFFF; margin-top: 24upx;">
				 <!-- 既往史（疾病）-->
				<view class="previousHistory">
					<view class="title bottomLine" @click="historyNameOne">
						<text>既往史（疾病）</text>
						<text>添加</text>
					</view>
					<view class="previousHistoryBox">
						<view class="item" v-for="(atem,index) in pastHistorydisease" :key="index">
							<span class="nameOf" @click="popUp('historyName',index,pastHistorydisease)" v-model="atem.name">{{atem.name || '请选择'}}</span>
							<text></text>
							<view>
								<!-- <span class="time" >{{}}</span> -->
								<picker mode="date" :value="atem.value" :start="startDate" :end="endDate" @change="timeConfirm" @click="timePopUp('historyName',index,pastHistorydisease)">
									<view class="uni-input">{{atem.value || '请选择时间'}}</view>
								</picker>
								<image src="../../../static/img/monitor/information/close@2x.png" @click="historyNameOneDel(index)"></image>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 既往史（手术）-->
				<view class="previousHistory">
					<view class="title bottomLine"  @click="historyNameTwo">
						<text>既往史（手术）</text>
						<text>添加</text>
					</view>
					<view class="previousHistoryBox">
						<view class="item" v-for="(atem,index) in pastHistorysurgery" :key="index">
							<input type="text" class="nameOf" placeholder="输入名称" v-model="atem.name">
							<text></text>
							<view>
								<!-- <input type="text" class="time" placeholder="时间" @click="timePopUp('historyNameTwo',index,pastHistorysurgery)"  v-model="atem.value"> -->
								<picker mode="date" :value="atem.value" :start="startDate" :end="endDate" @change="timeConfirm" @click="timePopUp('historyNameTwo',index,pastHistorysurgery)">
									<view class="uni-input">{{atem.value || '请选择时间'}}</view>
								</picker>
								<image src="../../../static/img/monitor/information/close@2x.png" @click="historyNametwoDel(index)"></image>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 既往史（外伤）-->
				<view class="previousHistory">
					<view class="title bottomLine" @click="historyNameThree">
						<text>既往史（外伤）</text>
						<text>添加</text>
					</view>
					<view class="previousHistoryBox">
						<view class="item"  v-for="(atem,index) in pastHistoryTraumae" :key="index">
							<input type="text" class="nameOf" placeholder="输入名称"   v-model="atem.name">
							<text></text>
							<view>
								<picker mode="date" :value="atem.value" :start="startDate" :end="endDate" @change="timeConfirm" @click="timePopUp('historyNameThree',index,pastHistoryTraumae)">
									<view class="uni-input">{{atem.value || '请选择时间'}}</view>
								</picker>
								<!-- <input type="text" class="time" placeholder="时间"  @click="timePopUp('historyNameThree',index,pastHistoryTraumae)" v-model="atem.value"> -->
								<image src="../../../static/img/monitor/information/close@2x.png"  @click="historyNamethreeDel(index)"></image>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 既往史（输血）-->
				<view class="previousHistory">
					<view class="title"  @click="historyNameFour">
						<text>既往史（输血）</text>
						<text>添加</text>
					</view>
					<view class="previousHistoryBox topLine">
						<view class="item"  v-for="(atem,index) in pastHistorytransfusion" :key="index">
							<input type="text" class="nameOf" placeholder="输入名称" v-model="atem.name">
							<text></text>
							<view>
								<picker mode="date" :value="atem.value" :start="startDate" :end="endDate" @change="timeConfirm" @click="timePopUp('historyNameFour',index,pastHistorytransfusion)">
									<view class="uni-input">{{atem.value || '请选择时间'}}</view>
								</picker>
								<!-- <input type="text" class="time" placeholder="时间" @click="timePopUp('historyNameFour',index,pastHistorytransfusion)" v-model="atem.value"> -->
								<image src="../../../static/img/monitor/information/close@2x.png" @click="historyNamefourDel(index)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 家族史 -->
			<view class="previousHistory">
				<view class="title headline">家族史</view>
				<view class="healthInformationBox">
					<u-collapse>
						<u-collapse-item :title="fathertitle || '父亲：无'">
							<u-checkbox-group>
								<u-checkbox active-color="#05C6AD" @change="checkboxChange($event,index,fatherArr,'fatherArray')" v-for="(item, index) in fatherArr" :key="index" v-model="item.value"  :name="item.name" >
									{{item.name}}
								</u-checkbox>
							</u-checkbox-group>
						</u-collapse-item>
						
						<u-collapse-item :title="monthertitle || '母亲: 无'">
							<u-checkbox-group>
								<u-checkbox active-color="#05C6AD" @change="checkboxChange($event,index,motherArr,'montherArray')" v-for="(item, index) in motherArr" :key="index" v-model="item.value"  :name="item.name" >
									{{item.name}}
								</u-checkbox>
							</u-checkbox-group>
						</u-collapse-item>
						
						<u-collapse-item :title="sistertitle || '兄弟姐妹: 无'">
							<u-checkbox-group>
								<u-checkbox active-color="#05C6AD" @change="checkboxChange($event,index,sisterArr,'sisterArray')" v-for="(item, index) in sisterArr" :key="index" v-model="item.value"  :name="item.name" >
									{{item.name}}
								</u-checkbox>
							</u-checkbox-group>
						</u-collapse-item>
						
						<u-collapse-item :title="sontitle || '子女: 无'">
							<u-checkbox-group>
								<u-checkbox active-color="#05C6AD" @change="checkboxChange($event,index,sonArr,'sonArray')" v-for="(item, index) in sonArr" :key="index" v-model="item.value"  :name="item.name" >
									{{item.name}}
								</u-checkbox>
							</u-checkbox-group>
						</u-collapse-item>
					
					</u-collapse>
				</view>
			</view>
			
			<!-- 遗传病史 -->
			<view class="geneticHistory">
				<view class="item" @click="geneticHistoryAdd">
					<text>遗传病史：{{geneticDisease.length > 0 ? '':'无'}}</text>
					<text>添加</text>
				</view>
				<view class="add">
					<view class="addContent" v-for="(item,index) in geneticDisease" :key="index">
						<input type="text" placeholder="遗传病名称" v-model="item.genetic">
						<image src="../../../static/img/monitor/information/close@2x.png" @click="geneticHistoryDel(index)"></image>
					</view>
				</view>
			</view>
			
			<view class="disability">
				<u-collapse>
					<u-collapse-item :title="disabilitytitle || '残疾情况：无残疾'">
						<u-checkbox-group>
							<u-checkbox active-color="#05C6AD" @change="checkboxChange($event,index,disabilityArr,'disabilityArray')" v-for="(item, index) in disabilityArr" :key="index" v-model="item.checked"  :name="item.name" >
								{{item.name}}
							</u-checkbox>
						</u-checkbox-group>
					</u-collapse-item>
				
				</u-collapse>
			</view>
		</view>
		
		<!-- 下拉框 -->
		<u-select v-model="show" @confirm="confirm" :list="defaultArr"></u-select>
		
		<!-- 时间 -->
		<!-- <u-picker v-model="timeShow"> -->
			
		<!-- </u-picker> -->
		
		<u-modal v-model="showModal" :content="showContent" :show-cancel-button="true" @confirm="sureconfirm" @cancel="cancel"></u-modal>
		
		<!-- <view class="uni-list" v-model="timeShow">
			<view class="uni-list-cell">
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @confirm="timeConfirm">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>
		</view> -->
				
		<!-- <view class="saveBox">
			<view  @click="showModalBtn(1)">保存</view>
			<view  @click="showModalBtn(2)">确认存档</view>
		</view> -->
	</view>
</template>

<script src="@/static/js/monitor/information/information.js"></script>

<style lang="scss" scoped>
	@import '@/static/css/monitor/accomplishment/index.scss';
	@import '@/static/css/monitor/information/information';
	/deep/ .u-checkbox-group {
		display: flex;
		flex-wrap: wrap;
	}
	/deep/ .u-checkbox {
		width: 33% !important;
		padding-bottom: 24upx;
	}
	
	/deep/ .u-checkbox__icon-wrap--square {
		border-radius: 18upx;
		width: 28upx !important;
		height: 28upx !important;
	}
</style>
